<!-- Created by mhy on 2018/6/27.

 -->
<template>
    <div class="frame-content">
      <div class="frame-left">
        <form class="frame-left-search" action="#">
          <input class="frame-search-input"  type="search" placeholder="搜索 装裱大师ID/手机/设备ID">
        </form>
        <div class="frame-left-dist"></div>

        <m-select v-model="value1" :options="options" title="注册方式" class="m-mb-10" @change="change"/>
        <m-select v-model="value2" :options="options" title="状态" class="m-mb-10"/>
        <m-select v-model="value3" :options="options" title="付费类型" class="m-mb-10"/>
      </div>
      <div class="frame-right">
        <div class="frame-right-header">
          <p class="frame-right-title">搜索</p>
          <div class="frame-right-search">
            <p class="frame-right-search-title">Black</p>
            <img class="" src="xxx.png">
          </div>
          <p class="frame-right-search-content" v-for="(item,index) in searchList" :key="index">{{item}}</p>
          <p class="frame-right-allitems">共{{listCount}}张</p>
        </div>
        <div class="frame-right-dist"></div>
        <div class="frame-right-list">
          <User-item v-for="i in 2" :key="i" @click.native="showDetail"/>
        </div>
        <div class="frame-right-dist"></div>
        <div class="frame-right-footer">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage3"
            :page-size="100"
            prev-text="上一页"
            next-text="下一页"
            layout="prev, pager, next, jumper"
            :total="1000">
          </el-pagination>
        </div>
      </div>
    </div>
</template>

<script>

  import {mapActions,mapState} from 'vuex'
  import FrameItem from './../../components/frame/frameItem.vue'
    export default {
      data() {
        return{
          searchList:["VIP","纯色"],
          pageIndex: 1,
          pageSize: 10,
          listCount: 100,
          value1: '1',
          value2: '2',
          value3: '3',
          options: [{
            value: '1',
            label: '黄金糕'
          }, {
            value: '2',
            label: '黄金糕11'
          }],
          currentPage3: 3
        }
      },
      components:{
        FrameItem
      },
      methods: {
        ...mapActions([
            'getFrameList'
        ]),
        change (item) {
          console.log(item)
        },
        newFrame() {
            this.$store.state.navTitle = '发布框条'
            this.$router.push('/frame/new')
        },
        handleSizeChange () {

        },
        handleCurrentChange () {

        },
        showDetail () {
          this.$router.push('/user/detail')
        }
      },
      computed: {
        ...mapState({
          frameList: state => state.material.frameList,
        })
      },
      mounted (){
          let params = {action:"getlist",page:this.pageIndex,pagesize:this.pageSize};
          this.getFrameList(params);
      }

    }
</script>

<style scoped>

  body{
    background-color: #F2F2F2;
  }
  /*顶部*/
  .frame-header{
    width: 100%;
    height: 35px;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
  }
  .frame-logo{
    width: 15px;
    height: 15px;
    margin-left: 3%;
  }
  .frame-new{
    border: 0;
    background-color: #39B866;
    width: 60px;
    height: 19px;
    border-radius: 3px;
    color: white;
    font-size: 6px;
    -webkit-text-size-adjust:none;
    margin-right: 10px;
    outline: none;
  }

  /*内容*/
  .frame-content{
    width:100%;
    display: flex;
    display: -webkit-flex;
  }
  /*左边*/
  .frame-left{
    width: 25%;
    min-width: 350px;
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
  }
  .frame-left-search{
    width: 80%;
    height: 40px;
    margin-top: 30px;
  }
  .frame-search-input{
    width: 100%;
    height: 100%;
    border-radius: 50px;
    border-width: 0.2px;
    border-color: #C8C8C8;
    outline:none;
    padding: 10px;
  }
  input::-ms-input-placeholder{
    text-align: center;
  }
  input::-webkit-input-placeholder{
    text-align: center;
  }
  .frame-left-dist{
    width: 80%;
    background-color: #C8C8C9;
    height: 1px;
    margin-top: 42px;
    margin-bottom: 30px;
  }

  .frame-left-category{
    margin:5px;
    width: 80%;
    height: 25px;
    background-color: white;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: space-between;
    border-width: 1px;
    border-color: #C8C8C8;
  }
  .category-title{
    margin-left: 10px;
    font-size: 7px;
    color: #303641;
  }
  .category-value{
    margin-right: 10px;
    font-size: 7px;
  }


  /*右边*/
  .frame-right{
    width: 75%;
    min-width: 850px;
    height: 900px;
    background-color: white;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .frame-right-dist{
    width: 90%;
    height: 0.5px;
    background-color: #979797;
  }
  .frame-right-header{
    height:80px;
    width: 90%;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    flex-direction: row;
  }
  .frame-right-title{
    font-size: 6px;
    color: #303641;
  }
  .frame-right-search{
    width: 100px;
    height: 30px;
    border-radius: 50px;
    border:1pt solid #C8C7CC;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    padding-left: 5px;
    padding-right: 5px;
    margin-left: 10px;
  }
  .frame-right-search-title{
    font-size: 6px;
    color: #303641;
    margin-right: 10px;
  }
  .frame-right-search-content{
    font-size: 6px;
    margin-left: 10px;
    color: #303641;
  }
  .frame-right-allitems{
    font-size: 6px;
    margin-left: auto;
  }
  .frame-right-list{
    width: 90%;
    height: 780px;
    margin-top: 32px;
  }
  .frame-right-footer{
    width: 90%;
    height: 40px;
    display: flex;
    display: -webkit-flex;
    justify-content: flex-end;
    align-items: center;
  }
  .frame-right-footer-txt{
    font-size: 7px;
    color: #303641;
    margin-right: 10px;
  }
  .frame-right-page-input{
    width: 40px;
    height:13px;
    outline: none;
    margin-right: 10px;
  }
  .frame-right-footer-search{
    width: 25px;
    height:13px;
    font-size: 6px;
    border: 0.1px solid #979797;
  }

  .m-mb-10{
    margin-bottom: 10px;
  }
</style>
